<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <el-row>
                    <el-col :span="4">
                        <el-button type="success" round size="large" @click="showAdd">新增</el-button>
                    </el-col>
                    <el-col :span="4"></el-col>
                    <el-col :span="4"></el-col>
                    <el-col :span="4"></el-col>
                    <el-col :span="4">
                        <el-input v-model="searchInfo" style="width: 240px" @input="getAll(1)" placeholder="请输入员工姓名" />
                    </el-col>
                    <el-col :span="4">

                    </el-col>
                </el-row>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="userId" label="id" />
            <el-table-column label="头像">
                <template #default="scope">
                    <el-avatar shape="square" size="large"
                        :src="'http://localhost:8080/images/' + scope.row.userAvatar" />
                </template>
            </el-table-column>
            <el-table-column prop="realName" label="姓名" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="userEmail" label="邮箱" />
            <el-table-column prop="userPhone" label="手机号" />
            <el-table-column prop="department.departmentName" label="部门业务" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="showUpdate(scope.row.userId)">编辑</el-button>
                    <el-popconfirm title="你确定要开除该员工吗？" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="delInfo(scope.row.userId)">
                        <template #reference>
                            <el-button size="small" type="danger">开除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-row class="row-bg" justify="space-evenly">
                <el-col :span="6">
                    <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                        @current-change="getAll" />
                </el-col>
            </el-row>
        </template>
    </el-card>



    <!-- START 新增对话框 -->
    <el-dialog v-model="addVisible" title="新增员工" align-center>
        <el-form :model="addInfoForm">
            <el-form-item label="姓名">
                <el-input v-model="addInfoForm.realName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="addInfoForm.gender" autocomplete="off" />
            </el-form-item>
            <el-form-item label="账户">
                <el-input v-model="addInfoForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="addInfoForm.userEmail" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="addInfoForm.userPhone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="addInfoForm.departmentId" placeholder="请选择部门">
                    <el-option v-for="item in department" :key="item.departmentId" :label="item.departmentName"
                        :value="item.departmentId" />
                </el-select>
            </el-form-item>
            <el-form-item label="员工头像">
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="handleUpload"
                    :before-upload="addAvatarUpload">
                    <img v-if="imageAddUrl" :src="imageAddUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="subAdd">提交</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- END 新增对话框 -->

    <!-- START 修改员工 -->
    <el-dialog v-model="updateVisible" title="新增员工" align-center>
        <el-form :model="updateInfoForm">
            <el-form-item label="姓名">
                <el-input v-model="updateInfoForm.realName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="updateInfoForm.gender" autocomplete="off" />
            </el-form-item>
            <el-form-item label="账户">
                <el-input v-model="updateInfoForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="updateInfoForm.userEmail" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="updateInfoForm.userPhone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="updateInfoForm.departmentId" placeholder="请选择部门">
                    <el-option v-for="item in department" :key="item.departmentId" :label="item.departmentName"
                        :value="item.departmentId" />
                </el-select>
            </el-form-item>
            <el-form-item label="员工头像">
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="handleUpload1"
                    :before-upload="addAvatarUpload">
                    <img v-if="imageUpdateUrl" :src="imageUpdateUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateVisible = false">取消</el-button>
                <el-button type="primary" @click="subUpdate">提交</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- END 修改员工 -->
</template>

<script setup>
import departmentApi from "@/api/departmentApi";
import fileApi from "@/api/fileApi";
import userApi from "@/api/userApi";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, computed } from "vue"

// 上传携带头部信息
const heards = ref({
    'token': sessionStorage.getItem('token')
})

// 表单数据
const tableData = ref([]);
const pageInfo = ref({});
// 新增表单显示
const addVisible = ref(false);
// 更新用户信息
const updateVisible = ref(false);

// 搜索数据
const searchInfo = ref('');



// 新增的用户信息
const addInfoForm = ref({
    realName: '',
    gender: '',
    username: '',
    userEmail: '',
    userPhone: '',
    userAvatar: '',
    userPhone: '',
    departmentId: ''
});
// 新增用户头像
const imageAddUrl = ref('');
// 部门信息表
const department = ref([]);

// 更新用户信息
const updateInfoForm = ref({
    realName: '',
    gender: '',
    username: '',
    userEmail: '',
    userPhone: '',
    userAvatar: '',
    departmentId: ''
});

// 更新头像地址
const imageUpdateUrl = ref('');

// 查询部门
const getDepart = () => {
    departmentApi.getAll()
        .then(resp => {
            if (resp.code === 10000) {
                department.value = resp.data;
            }
        });
}

// 删除用户
const delInfo = (id) => {
    userApi.delInfo(id)
        .then(resp => {
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                getAll(pageInfo.value.pageNum)
            } else {
                ElMessage.error(resp.msg);
            }
        });
}

// 查询
const getAll = (currentPage) => {
    userApi.getInfo(currentPage, 'emp', searchInfo.value)
        .then(resp => {
            console.log(resp.data);
            if (resp.code === 10000) {
                console.log(resp.data);
                pageInfo.value = resp.data;
                tableData.value = resp.data.list;
            }
        });
}


// 显示新增窗口
const showAdd = () => {
    getDepart();
    addVisible.value = true;
}

// 显示更新窗口
const showUpdate = (id) => {
    userApi.getById(id)
        .then(resp => {
            if (resp.code === 10000) {
                updateInfoForm.value = resp.data;
                imageUpdateUrl.value = "http://localhost:8080/images/" + updateInfoForm.value.userAvatar;
                updateVisible.value = true;
            }
        })
};

// 上传的请求
const handleUpload = (file) => {
    let fd = new FormData();
    fd.append("file", file.file);
    fileApi.upload(fd)
        .then(resp => {
            if (resp.code === 10000) {
                imageAddUrl.value = 'http://localhost:8080/images/' + resp.data;
                addInfoForm.value.userAvatar = resp.data;
            }
        });
}
const handleUpload1 = (file) => {
    let fd = new FormData();
    fd.append("file", file.file);
    fileApi.upload(fd)
        .then(resp => {
            if (resp.code === 10000) {
                imageUpdateUrl.value = 'http://localhost:8080/images/' + resp.data;
                updateInfoForm.value.userAvatar = resp.data;
            }
        });
}

// 新增之前的钩子函数
const addAvatarUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片格式要是JPG')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不要超过2MB!')
        return false
    }
    return true
}

// 提交新增
const subAdd = () => {
    userApi.addInfo(addInfoForm.value)
        .then(resp => {
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                addInfoForm.value = {
                    realName: '',
                    gender: '',
                    username: '',
                    userEmail: '',
                    userPhone: '',
                    userAvatar: '',
                    departmentId: ''
                };
                addVisible.value = false;
                getAll(1);
            } else {
                ElMessage.error(resp.msg);
            }
        });
}

// 提交修改
const subUpdate = () => {
    userApi.updateInfo(updateInfoForm.value)
        .then(resp => {
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                getAll(pageInfo.value.pageNum);
                updateVisible.value = false;
            } else {
                ElMessage.error(resp.msg);
            }
        });
}
onMounted(() => {
    getAll(1);
})
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
